<template>
  <div :id="id" :style="chartStyle"></div>
</template>

<script>
  import {EleResize} from '../utils/esresize';
  import echarts from 'echarts';
  //图表组件,必须安装echarts, npm install echarts
  export default {
    name: "Chart",
    props: {
      id: {//绑定的id
        type: String,
        default: "chart",//默认值
        required: true,
      },
      chartStyle:{//样式
        type: Object,
        required: false
      },
      option:{//配置
        type: Object,
        required: true,
      }
    },
    mounted(){
      this.drawLine(this.id, this.option);
    },
    methods: {
      // 绘制图表
      drawLine(dom, option) {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById(dom));
        const resizeDiv = document.getElementById(dom);
        myChart.setOption(option);
        const listener = function () {
          myChart.resize()
        };
        EleResize.on(resizeDiv, listener);
      },
    }
  }
</script>

<style scoped>

</style>
